﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts
{
    <script src="@Url.Content("~/Scripts/shared/share.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/shared/shown.js")" type="text/javascript"></script>
}
<style type="text/css">
    #trendChart {
        width: 100%;
        height: 100%;
    }

    #DivHeader {
        padding: 10px;
    }
</style>
<link href="~/Content/css/style.css" rel="stylesheet" />
<div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
    <table style="width: 100%;">
        <tr>
            <td style="width: 100%;">
                <a class="mini-button" iconcls="icon-search" onclick="LoadData" plain="true">刷新</a>
                <span class="separator"></span>
                <a class="mini-button" iconcls="icon-goto" onclick="clearloca" plain="true">重置</a>
                <span class="separator"></span>
                <a class="mini-button" iconcls="icon-close" onclick="CloseWindow" plain="true">关闭</a>
            </td>
        </tr>
    </table>
</div>
<div id="DivHeader">
    <table>
        <tr>
            <td width="70px" align="right">商户名称：</td>
            <td width="190px">
                @Html.Partial("~/Views/Modular/LookupCorpInfo.cshtml")
            </td>
            <td width="70px" align="right">时间段：</td>
            <td width="482px">
                @Html.Partial("~/Views/Modular/dxDateTimeRange.cshtml")
            </td>
            <td class="style18">
                <input id="dateType" name="dateType" class="mini-combobox" style="width: 70px;" value="1" shownullitem="false"
                    required="true" allowinput="false" align="left" data="date1" />
            </td>
        </tr>
    </table>
</div>
<div id="trendChart"></div>

<script src="~/Scripts/common.js"></script>
<script src="~/Scripts/echarts3.min.js"></script>
<script type="text/javascript">

    var date1 = [
        { "id": "0", "text": "按小时" },
        { "id": "1", "text": "按天" },
        { "id": "2", "text": "按月" }
    ];

    mini.parse();
    function FormShown() {

    }

    function clearloca() {
        mini.getbyName("FCorpItemID").setValue("");
        mini.getbyName("FCorpItemID").setText("");
        mini.getbyName("FCorpName").setValue("");
        var nowDate = new Date();
        mini.getbyName("FDateTime1").setValue(dateToStr(nowDate, 1));
        mini.getbyName("FDateTime2").setValue(dateToStr(nowDate, 2));
        mini.getbyName("comdatasel").setValue(0);
        mini.getbyName("dateType").setValue(1);
    }

    //$(function() {

    var myChart = echarts.init(document.getElementById('trendChart'));
    var option = {
        title: {
            text: '动态数据'
        },
        legend: {
            data: ['销售总额', '商品数量', '利润', '毛利率'],
            selected: {
                '222': true,
                '333': true,
                //不想显示的都设置成false  
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#283b56'
                }
            }
        },
        toolbox: {
            show: true,
            padding: [5, 80, 5, 5],
            feature: {
                magicType: {
                    show: true,
                    type: ['line', 'bar'],
                    title: {
                        line: '显示折线图',
                        bar: '显示柱状图'
                    }
                    //icon: {
                    //    line: 'image://../Images/icon/icon-line.png',
                    //    bar: 'image://../Images/icon/icon-bar.png'
                    //}
                },
                restore: {
                    show: true,
                    title: '还原'
                },
                saveAsImage: {
                    show: true,
                    title: '保存为图片'
                }
            }
        },
        grid: {
            left: '1%',
            right: '1%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: [
            {
                type: 'value',
                axisLabel: {

                }
            },
            {
                type: 'value',
                position: 'right',
                min: 0,
                max: 100,
                axisLabel: {
                    formatter: function (value) { return value + ' %' }
                }
            }
        ],
        series: [
            {
                name: '销售总额',
                data: [],
                type: 'bar',
                smooth: 0.15,
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                },
                markLine: {
                    data: [{ type: 'average', name: '平均值' }]
                }
            },
            {
                name: '商品数量',
                data: [],
                type: 'bar',
                smooth: 0.15,
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                },
                markLine: {
                    data: [{ type: 'average', name: '平均值' }]
                }
            },
            {
                name: '利润',
                data: [],
                type: 'bar',
                smooth: 0.15,
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                },
                markLine: {
                    data: [{ type: 'average', name: '平均值' }]
                }
            },
            {
                name: '毛利率',
                data: [],
                type: 'line',
                smooth: 0.15,
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                },
                markLine: {
                    data: [{ type: 'average', name: '平均值' }]
                }
            }
        ]
    };
    myChart.setOption(option);

    function LoadData() {
        var param = {
            mSystemAppID: parent.window.getSystemAppID(),
            FCorpID: mini.getbyName("FCorpItemID").getValue(),
            BeginDate: mini.getbyName("FDateTime1").getText(),
            EndDate: mini.getbyName("FDateTime2").getText(),
            GroupByType: mini.getbyName("dateType").getValue()
        }
        postRequest('/Report/GetTrendAnalysis', param, function (res) {
            if (res.status == 1) {
                var dates = [];
                var realAmount = [];
                var fQtys = [];
                var profits = [];
                var profitRates = [];
                for (var i = 0; i < res.data.length; i++) {
                    dates.push(res.data[i].FDate);
                    realAmount.push(res.data[i].FRealAmount);
                    fQtys.push(res.data[i].FQty);
                    profits.push(res.data[i].FProfit);
                    profitRates.push(res.data[i].FProfitRate);
                }
                myChart.setOption({
                    xAxis: {
                        data: dates
                    },
                    series: [
                    {
                        data: realAmount//销售额
                    },
                    {
                        data: fQtys//商品数量
                    },
                    {
                        data: profits//利润
                    },
                    {
                        data: profitRates//毛利率
                    }]
                });
            }
        });
    }

    LoadData();
    //});
</script>
